<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js定时器淡出切换</title>
    <style>
        body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; }
        em { font-style:normal; }
        li { list-style:none; }
        .box{ width: 610px; height: 260px; border: 2px solid #b4b4b3; margin: 40px auto; background-color: #fff; padding: 3px; position: relative; overflow: hidden;}
        .box img{ height: 260px; width: 610px;position: absolute; top: 3px;left: 3px }
        .js{ width: 610px; height: 60px; background: rgb(0,0,0,1); position: absolute; left: 3px; top: 203px; opacity: 0.6;}
        .js h3{ color: #fff; height: 60px; line-height: 60px;}
    </style>
    <script>
        window.onload=function() {
            var oImg = document.getElementsByTagName("img");
            var oDiv = document.getElementById("js");
            for (var i = 0; i < oImg.length; i++) {
                oImg[i].style.left = i * 613+3 + "px"
            }
            move1(oDiv,"top",10,266,function(){
                autoPlay();
            });
            var timer0=null;
            var index=0;
            function autoPlay(endFun0){
                clearInterval(timer0);
                timer0=setInterval(function() {
                    for (var i = 0; i < oImg.length; i++) {
                        var oo = parseInt(getStyle(oImg[i], "left"));
                        if(index<oImg.length){
                            move1(oImg[i], "left", 20, oo - 613,function(){
                                oDiv.style.top="203px";
                                oDiv.style.opacity= "0.6";
                                oDiv.style. filter="alpha(opacity=60)";
                                move1(oDiv,"top",10,266,function(){
                                    autoPlay();
                                });
                            });
                        }else{
                            clearInterval(timer0);
                        }
                        if(i==oImg.length-1){
                            clearInterval(timer0);
                            if(endFun0){
                                endFun0();
                            }
                        }
                    }
                },50)
                index++;
            }

            function move1(obj,arrt,step,destination,fun){
                clearInterval(obj.timer);
                step=destination>parseInt(getStyle(obj,arrt))?step:-step;
                obj.timer=setInterval(function(){
                    var dqwz=parseInt(getStyle(obj,arrt))+step;
                    if(dqwz>destination&&step>0 || dqwz<destination&&step<0 ){
                        clearInterval(obj.timer);
                        dqwz=destination;
                        if(fun){
                            fun();
                        }
                    }
                    obj.style[arrt]=dqwz+"px";
                },100)
            }
            function getStyle(obj,attr){
                return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj)[attr];
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="img/move/6.jpg">
    <img src="img/move/7.jpg">
    <img src="img/move/8.jpg">
    <img src="img/move/9.jpg">
    <img src="img/move/10.jpg">
    <div class="js" id="js">
        <h3>电影截图-经典电影截图-精选图片-Q友乐园</h3>
    </div>

</div>


</body>
</html>